<template>
  <el-form ref="form" :rules="rules" :model="currentGroup" label-width="100px" class="demo-form">
    <el-row :gutter="10">
      <el-col :span="spanCount">
          <el-card class="box-card">
            <el-form-item label="群名称" prop="name">
              <el-input v-model="currentGroup.name"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="headimgurl">
              <image-uploader v-model="currentGroup.headimgurl" :max-size="5120" :width="200" :height="200"></image-uploader>
            </el-form-item>
            <el-row style="margin-bottom: 20px;">
              <el-col>
                <el-form-item>
                  <el-button type="primary"  @click="save('form',1)">保存</el-button>
                  <el-button @click="back">返回</el-button>
                </el-form-item>

              </el-col>
            </el-row>
          </el-card>

      </el-col>
      <el-col :span="24-spanCount" v-if="currentGroup.id">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>成员信息</span> <el-button type="primary" style="margin-left: 10px;"  @click="saveGroupUser()">保存</el-button>
          </div>
            <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
            </el-input>
          <el-tree
            :data="groupAdmins"
            class="m_t_10"
            show-checkbox
            default-expand-all
            node-key="usId"
            ref="tree"
            highlight-current
            :filter-node-method="filterNode"
            :props="props">
          </el-tree>
        </el-card>

      </el-col>
    </el-row>

  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import ImageUploader from "@/components/image-uploader";
export default {
  props: {
    isClose: Boolean
  },
  created() {},
  mounted() {
    this.$watch("currentGroup", val => {
      if (val.id > 0) {
        var tem = { groupId: val.id, departId: this.adminInfo.depart.id };
        this.$store.dispatch("getAllAdminUserS", tem).then(ret => {
          var res = ret.data.data;
          var rows = [];
          if (res) {
            res.map((item, index) => {
              if (item.userId) {
                rows.push(item);
              }
            });
          }
          this.setCheckedNodes(rows);
        });
      }
    });
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {
    ...mapGetters({
      currentGroup: "currentGroup",
      adminInfo: "adminInfo",
      groupAdmins: "groupAdmins"
    }),
    spanCount() {
      if (this.currentGroup.id > 0) {
        return 12;
      } else {
        return 24;
      }
    }
  },
  data() {
    return {
      filterText: "",
      props: {
        label: "name"
      },
      multipleSelection: [],
      rules: {
        name: [
          { required: true, message: "请输入群名称", trigger: "blur" },
          { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    setCheckedNodes(rows) {
      this.$refs.tree.setCheckedNodes(rows);
    },
    filterNode(value, data) {
      console.log(value, data);
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    save(formName, status) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$store
            .dispatch("addOrUpdateGroupS", this.currentGroup)
            .then(ret => {
              this.$notify({
                title: "添加成功",
                type: "success"
              });
              this.back();
            });
        } else {
          return false;
        }
      });
    },
    saveGroupUser() {
      var para = { groupId: "", userIds: [] };
      para.groupId = this.currentGroup.id;
      para.userIds = this.$refs.tree.getCheckedKeys();
      this.$store.dispatch("addGroupUserS", para).then(ret => {
        this.$notify({
          title: "添加成功",
          type: "success"
        });
        this.back();
      });
    },
    back() {
      this.$emit("close");
    }
  },
  components: { ImageUploader }
};
</script>
<style scoped>
.el-tree-node {
  height: 35px !important;
}
</style>
